<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树行结构</title>
	
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ztree/css/demo.css"/>
 	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ztree/css/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ztree/js/jquery.ztree.all.js" ></script>
    <script type="text/javascript">
		
    var setting = {
			data: {
				simpleData: {
					enable: true
				}
			},
			async: {
				enable: true,
				url: "list",
				autoParam: ["id"]
			},
			callback: {
				/* onClick: zTreeOnClick */
				beforeDrop: zTreeBeforeDrop,
				beforeRemove: zTreeBeforeRemove,
				onRemove: zTreeOnRemove,
				onDrop: zTreeOnDrop,
				onRename: zTreeOnRename
			},
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			edit: {
				enable: true,
				renameTitle: '修改',
				removeTitle: '删除',
				drag: {
					prev: false,
					next: false,
					inner: true
				}
			}
		};
    	function zTreeOnClick(event, treeId, treeNode) {
			$('myForm').load('edit',{id:treeNode.id});
		}
    	function zTreeOnRemove(event, treeId, treeNode) {
    		$.post('delete',{id:treeNode.id},function(data){});
    	}
    	function zTreeOnRename(event, treeId, treeNode, isCancel) {
    		$.post('rename',{id:treeNode.id,name:treeNode.name},function(data){});
    	}
    	function zTreeBeforeRemove(treeId, treeNode) {
    		return confirm("是否删除？'"+treeNode.name+"'将被删除");
    	}
    	function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) {
    		var treeNode=treeNodes[0];
    		return confirm("是否将["+treeNode.name+"]拖拽到["+targetNode.name+"]");
    	};
    	var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='新增' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				
				$.post('add',{pId:treeNode.id},function(data){
					zTree.addNodes(treeNode, data);
				});
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};
		/* 拖拽 */
		function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
			var treeNode=treeNodes[0];
		  	$.post('move',{id:treeNode.id,pId:targetNode.id});
		};
		/* var zNodes =[
			{ id:1, pId:0, name:"父节点1 - 展开", open:true},
			{ id:11, pId:1, name:"父节点11 - 折叠"},
			{ id:111, pId:11, name:"叶子节点111"},
			{ id:112, pId:11, name:"叶子节点112"},
			{ id:113, pId:11, name:"叶子节点113"},
			{ id:114, pId:11, name:"叶子节点114"},
			{ id:12, pId:1, name:"父节点12 - 折叠"},
			{ id:121, pId:12, name:"叶子节点121"},
			{ id:122, pId:12, name:"叶子节点122"},
			{ id:123, pId:12, name:"叶子节点123"},
			{ id:124, pId:12, name:"叶子节点124"},
			{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
			{ id:2, pId:0, name:"父节点2 - 折叠"},
			{ id:21, pId:2, name:"父节点21 - 展开", open:true},
			{ id:211, pId:21, name:"叶子节点211"},
			{ id:212, pId:21, name:"叶子节点212"},
			{ id:213, pId:21, name:"叶子节点213"},
			{ id:214, pId:21, name:"叶子节点214"},
			{ id:22, pId:2, name:"父节点22 - 折叠"},
			{ id:221, pId:22, name:"叶子节点221"},
			{ id:222, pId:22, name:"叶子节点222"},
			{ id:223, pId:22, name:"叶子节点223"},
			{ id:224, pId:22, name:"叶子节点224"},
			{ id:23, pId:2, name:"父节点23 - 折叠"},
			{ id:231, pId:23, name:"叶子节点231"},
			{ id:232, pId:23, name:"叶子节点232"},
			{ id:233, pId:23, name:"叶子节点233"},
			{ id:234, pId:23, name:"叶子节点234"},
			{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
		];
		 */
		
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting);
		});
	</SCRIPT>
</head>
<style type="text/css">
	.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	.zTreeDemoBackground{
			border:1px dashed #000;
			width: 30%;
		}
</style>
<body>
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	<div id="myForm" class="right">
	</div>
</body>
</html>